import React from "react";
import {Button, Empty, Flex} from "antd";
import {useNavigate} from "react-router-dom";
import errorImage from "@/assets/images/error.svg";

interface ErrorProps {
  msg: string
  title?: string
}

const ViewError: React.FC<ErrorProps> = ({msg, title}) => {

  const navigate = useNavigate()

  return (
    <Flex vertical justify="center" align="center" style={{width: '100%', height: "100vh"}}>
      <Empty
        image={errorImage}
        imageStyle={{height: 200}}
        description={
          <div>
            {title ? <p style={{fontSize: 28, fontWeight: 'bold', color: '#F48FB1'}}>{title}</p> : ''}
            <span className="error-description-content">{msg} </span>
          </div>
        }>
        <Button onClick={() => navigate('/home')}>首页</Button>
      </Empty>
    </Flex>
  )
}

export default ViewError